<template>
  <!-- 加载数据 -->
  <a-modal
    title="加载数据"
    :visible="visible"
    ok-text="确定"
    cancel-text="取消"
    centered
    @cancel.stop="cancelDataImport"
  >
    <div class="search-box-cont">
      <a-input v-model="keyword" placeholder="输入搜索关键字..." allow-clear />
    </div>
    <div class="number-of-select">
      <span
        >已选{{ checkDataIds }}个文件,共{{
          searchMode ? searchDataList.length : allUserDataCount
        }}个文件</span
      >
      <a @click="toDataImport">导入数据</a>
    </div>
    <!--  body  -->
    <div class="description scroll-bar">
      <div v-if="!searchMode">
        <a-tree
          v-model="checkIds"
          :tree-data="dealUserDataList"
          checkable
          @check="handleCheck"
        >
          <template #title="{ title, disableCheckbox }">
            <span v-if="disableCheckbox" class="node-title">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ title }}</span>
                </template>
                <span class="left"> {{ title }}</span>
              </a-tooltip>
              <span class="right">已载入</span>
            </span>
            <a-tooltip v-else placement="top">
              <template slot="title">
                <span>{{ title }}</span>
              </template>
              <span> {{ title }}</span>
            </a-tooltip>
          </template>
        </a-tree>
      </div>
      <div v-if="searchMode">
        <a-tree
          v-model="checkIds"
          :tree-data="searchDataList"
          checkable
          @check="handleCheck"
        >
          <template #title="{ title, disableCheckbox }">
            <span v-if="disableCheckbox" class="node-title">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ title }}</span>
                </template>
                <span class="left"> {{ title }}</span>
              </a-tooltip>
              <span class="right">已载入</span>
            </span>
            <a-tooltip v-else placement="top">
              <template slot="title">
                <span>{{ title }}</span>
              </template>
              <span> {{ title }}</span>
            </a-tooltip>
          </template>
        </a-tree>
      </div>
      <div
        v-if="
          (searchMode && searchDataList.length === 0) ||
          (!searchMode && dealUserDataList.length === 0)
        "
        class="no-result"
      >
        <img alt="" src="@/assets/view/category-empty.svg" />
        <div>暂无数据</div>
        <div>请到数据管理中导入数据</div>
      </div>
    </div>

    <template slot="footer">
      <a-button key="back" @click="cancelDataImport"> 取消 </a-button>
      <a-button
        key="submit"
        :loading="btnLoading"
        type="primary"
        @click="dataImport"
      >
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'

const status = [false, true]

@Component
export default class LoadDataModal extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: boolean
  // 项目id
  @Prop({ type: Number, default: 0 }) projectId!: number
  @Prop({ type: String, default: '' }) type!: string // data：数据视图，gis，knowledge
  @Prop({ type: Array, default: () => [] }) userDataList!: any[]
  @Prop({ type: Array, default: () => [] }) searchDataList!: any[]
  @Prop({ type: Boolean, default: false }) btnLoading!: boolean

  public checkIds: Array<number> = []
  // 已展开的列表
  public collapsedList: Array<string> = []
  public keyword: string = ''
  public loadedIds: number = 0 // 已导入的数量

  @Watch('visible')
  public onLoadVisible(value: boolean) {
    console.log('visible change', value)
    if (value) {
      this.checkIds = []
      this.keyword = ''
    }
  }

  @Watch('keyword')
  private async _onKeywordChanged(keyword: string) {
    if (keyword.replace(/^\s+|\s+$/g, '')) {
      this.checkIds = []
      this.$emit('key-change', keyword, this.type)
    }
  }

  // 已选择的数量
  private get checkDataIds() {
    return this.checkIds.filter(
      (item: number | string) => typeof item === 'number'
    ).length
  }

  // 搜索模式
  public get searchMode() {
    return this.keyword.replace(/^\s+|\s+$/g, '').length > 0
  }

  private get allUserDataCount() {
    return this.userDataList.flatMap((item: any) => item.dataset).length
  }

  // 用户数据渲染
  public get dealUserDataList() {
    const list: Array<any> = []
    this.userDataList.forEach((group: any) => {
      const groupList: Array<any> = []
      if (group.dataset.length > 0) {
        group.dataset.forEach((item: any) => {
          groupList.push({
            title: item.name,
            key: item.id,
            disableCheckbox: item.status === 1 ? status[1] : status[0],
          })
          if (item.status === 1) {
            this.loadedIds += 1
          }
        })
      }
      list.push({
        title: group.categoryName,
        key: String(group.categoryId),
        children: groupList,
      })
    })
    return list
  }

  // 确认加载数据
  public async dataImport() {
    this.$emit('confirm-import', this.checkIds)
  }

  /**
   * 取消上传
   */
  public cancelDataImport() {
    this.$emit('close')
  }

  // 跳转到数据导入
  public toDataImport() {
    this.$emit('to-data-import')
  }

  // 只能单选
  public handleCheck(checkedKeys: any[]) {
    if (this.type === 'kg' && checkedKeys.length > 1) {
      // 单选模式
      const newArray = checkedKeys.filter((item) => {
        return item > 0
      })
      this.checkIds = [].concat(newArray.pop())
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/panelList';

/deep/.ant-tree-checkbox::before {
  width: 100% !important;
}

/deep/.ant-tree-node-content-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 50px);
}

.description {
  height: 300px;
  overflow-y: auto;
}

.number-of-select {
  align-items: center;
  color: #222432;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  height: 32px;
  justify-content: space-between;
  letter-spacing: 1px;
  line-height: 17px;
  margin-top: 10px;
}

.node-title {
  display: flex;
  justify-content: space-between;

  .left {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 90px);
  }

  .right {
    color: #9b9da8;
    font-size: 12px;
  }
}
</style>
